<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <table>
        <thead>
            <tr><th>id</th><th>price</th><th>sales</th></tr>
        </thead>
        <tbody id="jsList">
            <tr><td>1</td><td>10.0</td><td>800</td></tr>
            <tr><td>2</td><td>30.0</td><td>600</td></tr>
            <tr><td>3</td><td>20.5</td><td>700</td></tr>
            <tr><td>4</td><td>40.5</td><td>500</td></tr>
            <tr><td>5</td><td>60.5</td><td>300</td></tr>
            <tr><td>6</td><td>50.0</td><td>400</td></tr>
            <tr><td>7</td><td>70.0</td><td>200</td></tr>
            <tr><td>8</td><td>80.5</td><td>100</td></tr>
        </tbody>
    </table>

    <script>
        /**
         * TODO: reverseBubble can not get true order.
         * order => 'asc' / 'desc'
         */
        function sort(type, order) {
            var table = document.getElementsByTagName('table')[0];
            var table_head = table.rows[0].cells;
            var temp_row;
            var tableRowLen = table.rows.length;
            
            for (var index = 0; index < table.rows[0].cells.length; index++) {
                type === table.rows[0].cells[index].innerText ?
                  (type = index) :
                  null;
            }

            let isPrematureEnd = true;

            // choose bubble sorting effect
            if (order === 'asc') {
                bubble(tableRowLen, type, isPrematureEnd);
            } else {
                reverseBubble(tableRowLen, type, isPrematureEnd);
            }

            return table;
        
            function swopBetween(n, m) {
                var temp_text = '';
                var index = 0;
                var len = table.rows[0].cells.length;

                for (index = 0; index < len; index++) {
                    temp_text = table.rows[n].cells[index].innerText;
                    table.rows[n].cells[index].innerText = table.rows[m].cells[index].innerText;
                    table.rows[m].cells[index].innerText = temp_text;
                }
            }

            function bubble(len, type, isPrematureEnd) {
                for (let i = 1; i < len - 1; i++) {
                    for (let j = 2; j < len - i + 1; j++) {
                        if (parseFloat(table.rows[j - 1].cells[type].innerText) > parseFloat(table.rows[j].cells[type].innerText)) {
                            swopBetween(j - 1, j);
                            isPrematureEnd = false;
                        }
                    }
                    if (isPrematureEnd) break;
                    isPrematureEnd = true;
                }
            }

            function reverseBubble(len, type, isPrematureEnd) {
                for (let i = 1; i < len - 1; i++) {
                    for (let j = len - i; j > 2; j--) {
                        if (parseFloat(table.rows[j - 1].cells[type].innerText) < parseFloat(table.rows[j].cells[type].innerText)) {
                            swopBetween(j - 1, j);
                        }
                    }
                }
            }
        }

        sort('price', 'dasc');
    </script>
</body>
</html>